<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2023-01-17 19:29:14
 * @LastEditors: chaixinyu
 * @LastEditTime: 2023-01-17 20:07:54
-->
<template>
  <div class="big-box">
    <div class="emoji-box">
      <span class="emojiList" v-for="(item, index) in emojis" :key="index" @click="handleEmoji(item)">
        {{item.text}}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const emits = defineEmits(['showEmoji'])

// 表情列表
let emojis = ref([
  '😀', '😄', '😅', '🤣', '😂', '😉', '😊', '😍', '😘', '😜',
  '😝', '😏', '😒', '🙄', '😔', '😴', '😷', '🤮', '🥵', '😎',
  '😮', '😰', '😭', '😱', '😩', '😡', '💀', '👽', '🤓', '🥳',
  '😺', '😹', '😻', '🤚', '💩', '👍', '👎', '👏', '🙏', '💪',
  '🤢','🤡','👌','👨‍🦳'
])
emojis = emojis.value.map(emoji => ({text: emoji}))

// 点击触发自定义事件
const handleEmoji = (emoji) => {
  emits('showEmoji',emoji.text)
}

</script>

<style scoped lang="less">
.big-box{
  width: 100%;

  .emoji-box{
    display: flex;
    flex-flow:wrap row;
    justify-content: space-between;
    // align-content: space-between;
    // background-color: pink;
    margin: 20px auto 0;
    width: 85%;
    height: 200px;
  }

  .emojiList{
    font-size: 25px;
  }
}
</style>

